<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Dashboard | Klorofil - Free Bootstrap Dashboard Template</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="css/css.css" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="brand">
				<a href="index.html"><img src="images/logo-dark.png" alt="Klorofil Logo" class="img-responsive logo"></a>
			</div>
			<div class="container-fluid">
				<div class="navbar-btn">
					<button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
				</div>
				<form class="navbar-form navbar-left">
					<div class="input-group">
						<input type="text" value="" class="form-control" placeholder="Search dashboard...">
						<span class="input-group-btn"><button type="button" class="btn btn-primary">Go</button></span>
					</div>
				</form>
				<div class="navbar-btn navbar-btn-right">
					<a class="btn btn-success update-pro" href="#" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
				</div>
				<div id="navbar-menu">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle icon-menu" data-toggle="dropdown">
								<i class="lnr lnr-alarm"></i>
								<span class="badge bg-danger">5</span>
							</a>
							<ul class="dropdown-menu notifications">
								<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>System space is almost full</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-danger"></span>You have 9 unfinished tasks</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Monthly report is available</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>Weekly meeting in 1 hour</a></li>
								<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Your request has been approved</a></li>
								<li><a href="#" class="more">See all notifications</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="lnr lnr-question-circle"></i> <span>Help</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#">Basic Use</a></li>
								<li><a href="#">Working With Data</a></li>
								<li><a href="#">Security</a></li>
								<li><a href="#">Troubleshooting</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="./Dashboard_files/user.png" class="img-circle" alt="Avatar"> <span>Samuel</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="lnr lnr-user"></i> <span>My Profile</span></a></li>
								<li><a href="#"><i class="lnr lnr-envelope"></i> <span>Message</span></a></li>
								<li><a href="#"><i class="lnr lnr-cog"></i> <span>Settings</span></a></li>
								<li><a href="#"><i class="lnr lnr-exit"></i> <span>Logout</span></a></li>
							</ul>
						</li>
						<!-- <li>
							<a class="update-pro" href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
						</li> -->
					</ul>
				</div>
			</div>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 95%;"><div class="sidebar-scroll" style="overflow: hidden; width: auto; height: 95%;">
				<nav>
					<ul class="nav">
						<li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>Dashboard</span></a></li>
						<li><a href="elements.html" class=""><i class="lnr lnr-code"></i> <span>Elements</span></a></li>
						<li><a href="charts.html" class=""><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>
						<li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
						<li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
						<li>
							<a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Pages</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
							<div id="subPages" class="collapse ">
								<ul class="nav">
									<li><a href="page-profile.html" class="">Profile</a></li>
									<li><a href="page-login.html" class="">Login</a></li>
									<li><a href="page-lockscreen.html" class="">Lockscreen</a></li>
								</ul>
							</div>
						</li>
						<li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
						<li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
						<li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
					</ul>
				</nav>
			</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 789px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<!-- OVERVIEW -->
					<div class="panel panel-headline">
						<div class="panel-heading">
							<h3 class="panel-title">Weekly Overview</h3>
							<p class="panel-subtitle">Period: Oct 14, 2016 - Oct 21, 2016</p>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-md-3">
									<div class="metric">
										<span class="icon"><i class="fa fa-download"></i></span>
										<p>
											<span class="number">1,252</span>
											<span class="title">Downloads</span>
										</p>
									</div>
								</div>
								<div class="col-md-3">
									<div class="metric">
										<span class="icon"><i class="fa fa-shopping-bag"></i></span>
										<p>
											<span class="number">203</span>
											<span class="title">Sales</span>
										</p>
									</div>
								</div>
								<div class="col-md-3">
									<div class="metric">
										<span class="icon"><i class="fa fa-eye"></i></span>
										<p>
											<span class="number">274,678</span>
											<span class="title">Visits</span>
										</p>
									</div>
								</div>
								<div class="col-md-3">
									<div class="metric">
										<span class="icon"><i class="fa fa-bar-chart"></i></span>
										<p>
											<span class="number">35%</span>
											<span class="title">Conversions</span>
										</p>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-9">
									<div id="headline-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="300" class="ct-chart-line" style="width: 100%; height: 300;"><g class="ct-grids"><line y1="265" y2="265" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="229.28571428571428" y2="229.28571428571428" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="193.57142857142856" y2="193.57142857142856" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="157.85714285714286" y2="157.85714285714286" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="122.14285714285714" y2="122.14285714285714" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="86.42857142857142" y2="86.42857142857142" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="50.71428571428572" y2="50.71428571428572" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="1133.25" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><path d="M50,265L50,172.143L230.542,129.286L411.083,165L591.625,50.714L772.167,157.857L952.708,165L1133.25,86.429L1133.25,265Z" class="ct-area"></path></g><g class="ct-series ct-series-b"><path d="M50,265L50,236.429L230.542,157.857L411.083,207.857L591.625,93.571L772.167,129.286L952.708,65L1133.25,22.143L1133.25,265Z" class="ct-area"></path></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="50" y="270" width="180.54166666666666" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mon</span></foreignobject><foreignobject style="overflow: visible;" x="230.54166666666666" y="270" width="180.54166666666666" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Tue</span></foreignobject><foreignobject style="overflow: visible;" x="411.0833333333333" y="270" width="180.54166666666669" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Wed</span></foreignobject><foreignobject style="overflow: visible;" x="591.625" y="270" width="180.54166666666663" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Thu</span></foreignobject><foreignobject style="overflow: visible;" x="772.1666666666666" y="270" width="180.54166666666663" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Fri</span></foreignobject><foreignobject style="overflow: visible;" x="952.7083333333333" y="270" width="180.54166666666674" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 181px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sat</span></foreignobject><foreignobject style="overflow: visible;" x="1133.25" y="270" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sun</span></foreignobject><foreignobject style="overflow: visible;" y="229.28571428571428" x="10" height="35.714285714285715" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">10</span></foreignobject><foreignobject style="overflow: visible;" y="193.57142857142856" x="10" height="35.714285714285715" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">15</span></foreignobject><foreignobject style="overflow: visible;" y="157.85714285714283" x="10" height="35.71428571428571" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">20</span></foreignobject><foreignobject style="overflow: visible;" y="122.14285714285714" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">25</span></foreignobject><foreignobject style="overflow: visible;" y="86.42857142857142" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">30</span></foreignobject><foreignobject style="overflow: visible;" y="50.71428571428572" x="10" height="35.714285714285694" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">35</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">40</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">45</span></foreignobject></g></svg></div>
								</div>
								<div class="col-md-3">
									<div class="weekly-summary text-right">
										<span class="number">2,315</span> <span class="percentage"><i class="fa fa-caret-up text-success"></i> 12%</span>
										<span class="info-label">Total Sales</span>
									</div>
									<div class="weekly-summary text-right">
										<span class="number">$5,758</span> <span class="percentage"><i class="fa fa-caret-up text-success"></i> 23%</span>
										<span class="info-label">Monthly Income</span>
									</div>
									<div class="weekly-summary text-right">
										<span class="number">$65,938</span> <span class="percentage"><i class="fa fa-caret-down text-danger"></i> 8%</span>
										<span class="info-label">Total Income</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- END OVERVIEW -->
                    <div class="copyrights">Collect from <a href="javascript:void(0);">苏demo模板</a></div>
					<div class="row">
						<div class="col-md-6">
							<!-- RECENT PURCHASES -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Recent Purchases</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body no-padding">
									<table class="table table-striped">
										<thead>
											<tr>
												<th>Order No.</th>
												<th>Name</th>
												<th>Amount</th>
												<th>Date &amp; Time</th>
												<th>Status</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><a href="#">763648</a></td>
												<td>Steve</td>
												<td>$122</td>
												<td>Oct 21, 2016</td>
												<td><span class="label label-success">COMPLETED</span></td>
											</tr>
											<tr>
												<td><a href="#">763649</a></td>
												<td>Amber</td>
												<td>$62</td>
												<td>Oct 21, 2016</td>
												<td><span class="label label-warning">PENDING</span></td>
											</tr>
											<tr>
												<td><a href="#">763650</a></td>
												<td>Michael</td>
												<td>$34</td>
												<td>Oct 18, 2016</td>
												<td><span class="label label-danger">FAILED</span></td>
											</tr>
											<tr>
												<td><a href="#">763651</a></td>
												<td>Roger</td>
												<td>$186</td>
												<td>Oct 17, 2016</td>
												<td><span class="label label-success">SUCCESS</span></td>
											</tr>
											<tr>
												<td><a href="#">763652</a></td>
												<td>Smith</td>
												<td>$362</td>
												<td>Oct 16, 2016</td>
												<td><span class="label label-success">SUCCESS</span></td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="panel-footer">
									<div class="row">
										<div class="col-md-6"><span class="panel-note"><i class="fa fa-clock-o"></i> Last 24 hours</span></div>
										<div class="col-md-6 text-right"><a href="#" class="btn btn-primary">View All Purchases</a></div>
									</div>
								</div>
							</div>
							<!-- END RECENT PURCHASES -->
						</div>
						<div class="col-md-6">
							<!-- MULTI CHARTS -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Projection vs. Realization</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body">
									<div id="visits-trends-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="270px" class="ct-chart-line" style="width: 100%; height: 270px;"><g class="ct-grids"></g><g><g ct:series-name="series-real" class="ct-series ct-series-a"><path d="M20,186.111L82.682,142.111L145.364,149.444L208.045,156.778L270.727,134.778L333.409,125L396.091,95.667L458.773,137.222L521.455,99.333L584.136,83.444L646.818,51.667L709.5,15" class="ct-line"></path><line x1="20" y1="186.11111111111111" x2="20.01" y2="186.11111111111111" class="ct-point" ct:value="200"></line><line x1="82.68181818181819" y1="142.11111111111111" x2="82.69181818181819" y2="142.11111111111111" class="ct-point" ct:value="380"></line><line x1="145.36363636363637" y1="149.44444444444446" x2="145.37363636363636" y2="149.44444444444446" class="ct-point" ct:value="350"></line><line x1="208.04545454545453" y1="156.77777777777777" x2="208.05545454545452" y2="156.77777777777777" class="ct-point" ct:value="320"></line><line x1="270.72727272727275" y1="134.77777777777777" x2="270.73727272727274" y2="134.77777777777777" class="ct-point" ct:value="410"></line><line x1="333.4090909090909" y1="125" x2="333.41909090909087" y2="125" class="ct-point" ct:value="450"></line><line x1="396.09090909090907" y1="95.66666666666666" x2="396.10090909090906" y2="95.66666666666666" class="ct-point" ct:value="570"></line><line x1="458.77272727272725" y1="137.22222222222223" x2="458.78272727272724" y2="137.22222222222223" class="ct-point" ct:value="400"></line><line x1="521.4545454545455" y1="99.33333333333334" x2="521.4645454545455" y2="99.33333333333334" class="ct-point" ct:value="555"></line><line x1="584.1363636363636" y1="83.44444444444446" x2="584.1463636363636" y2="83.44444444444446" class="ct-point" ct:value="620"></line><line x1="646.8181818181818" y1="51.66666666666666" x2="646.8281818181817" y2="51.66666666666666" class="ct-point" ct:value="750"></line><line x1="709.5" y1="15" x2="709.51" y2="15" class="ct-point" ct:value="900"></line></g><g ct:series-name="series-projection" class="ct-series ct-series-b"><path d="M20,235L20,176.333L82.682,149.444L145.364,147L208.045,142.111L270.727,137.222L333.409,125L396.091,117.667L458.773,107.156L521.455,99.333L584.136,88.333L646.818,63.889L709.5,39.444L709.5,235Z" class="ct-area"></path></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="20" y="240" width="62.68181818181818" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignobject><foreignobject style="overflow: visible;" x="82.68181818181819" y="240" width="62.68181818181818" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignobject><foreignobject style="overflow: visible;" x="145.36363636363637" y="240" width="62.68181818181817" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignobject><foreignobject style="overflow: visible;" x="208.04545454545453" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignobject><foreignobject style="overflow: visible;" x="270.72727272727275" y="240" width="62.68181818181816" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignobject><foreignobject style="overflow: visible;" x="333.4090909090909" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignobject><foreignobject style="overflow: visible;" x="396.09090909090907" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignobject><foreignobject style="overflow: visible;" x="458.77272727272725" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignobject><foreignobject style="overflow: visible;" x="521.4545454545455" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignobject><foreignobject style="overflow: visible;" x="584.1363636363636" y="240" width="62.68181818181813" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignobject><foreignobject style="overflow: visible;" x="646.8181818181818" y="240" width="62.681818181818244" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignobject><foreignobject style="overflow: visible;" x="709.5" y="240" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignobject><foreignobject style="overflow: visible;" y="210.55555555555554" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignobject><foreignobject style="overflow: visible;" y="186.1111111111111" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">100</span></foreignobject><foreignobject style="overflow: visible;" y="161.66666666666669" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">200</span></foreignobject><foreignobject style="overflow: visible;" y="137.22222222222223" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">300</span></foreignobject><foreignobject style="overflow: visible;" y="112.77777777777777" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">400</span></foreignobject><foreignobject style="overflow: visible;" y="88.33333333333334" x="20" height="24.44444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">500</span></foreignobject><foreignobject style="overflow: visible;" y="63.888888888888886" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">600</span></foreignobject><foreignobject style="overflow: visible;" y="39.44444444444446" x="20" height="24.44444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">700</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">800</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="20" height="30" width="0"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">900</span></foreignobject></g></svg></div>
								</div>
							</div>
							<!-- END MULTI CHARTS -->
						</div>
					</div>
					<div class="row">
						<div class="col-md-7">
							<!-- TODO LIST -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">To-Do List</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body">
									<ul class="list-unstyled todo-list">
										<li>
											<label class="control-inline fancy-checkbox">
												<input type="checkbox"><span></span>
											</label>
											<p>
												<span class="title">Restart Server</span>
												<span class="short-description">Dynamically integrate client-centric technologies without cooperative resources.</span>
												<span class="date">Oct 9, 2016</span>
											</p>
											<div class="controls">
												<a href="#"><i class="icon-software icon-software-pencil"></i></a> <a href="#"><i class="icon-arrows icon-arrows-circle-remove"></i></a>
											</div>
										</li>
										<li>
											<label class="control-inline fancy-checkbox">
												<input type="checkbox"><span></span>
											</label>
											<p>
												<span class="title">Retest Upload Scenario</span>
												<span class="short-description">Compellingly implement clicks-and-mortar relationships without highly efficient metrics.</span>
												<span class="date">Oct 23, 2016</span>
											</p>
											<div class="controls">
												<a href="#"><i class="icon-software icon-software-pencil"></i></a> <a href="#"><i class="icon-arrows icon-arrows-circle-remove"></i></a>
											</div>
										</li>
										<li>
											<label class="control-inline fancy-checkbox">
												<input type="checkbox"><span></span>
											</label>
											<p>
												<strong>Functional Spec Meeting</strong>
												<span class="short-description">Monotonectally formulate client-focused core competencies after parallel web-readiness.</span>
												<span class="date">Oct 11, 2016</span>
											</p>
											<div class="controls">
												<a href="#"><i class="icon-software icon-software-pencil"></i></a> <a href="#"><i class="icon-arrows icon-arrows-circle-remove"></i></a>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<!-- END TODO LIST -->
						</div>
						<div class="col-md-5">
							<!-- TIMELINE -->
							<div class="panel panel-scrolling">
								<div class="panel-heading">
									<h3 class="panel-title">Recent User Activity</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 430px;"><div class="panel-body" style="overflow: hidden; width: auto; height: 430px;">
									<ul class="list-unstyled activity-list">
										<li>
											<img src="images/user1.png" alt="Avatar" class="img-circle pull-left avatar">
											<p><a href="#">Michael</a> has achieved 80% of his completed tasks <span class="timestamp">20 minutes ago</span></p>
										</li>
										<li>
											<img src="images/user2.png" alt="Avatar" class="img-circle pull-left avatar">
											<p><a href="#">Daniel</a> has been added as a team member to project <a href="#">System Update</a> <span class="timestamp">Yesterday</span></p>
										</li>
										<li>
											<img src="images/user3.png" alt="Avatar" class="img-circle pull-left avatar">
											<p><a href="#">Martha</a> created a new heatmap view <a href="#">Landing Page</a> <span class="timestamp">2 days ago</span></p>
										</li>
										<li>
											<img src="images/user4.png" alt="Avatar" class="img-circle pull-left avatar">
											<p><a href="#">Jane</a> has completed all of the tasks <span class="timestamp">2 days ago</span></p>
										</li>
										<li>
											<img src="images/user5.png" alt="Avatar" class="img-circle pull-left avatar">
											<p><a href="#">Jason</a> started a discussion about <a href="#">Weekly Meeting</a> <span class="timestamp">3 days ago</span></p>
										</li>
									</ul>
									<button type="button" class="btn btn-primary btn-bottom center-block">Load More</button>
								</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 337.409px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
							</div>
							<!-- END TIMELINE -->
						</div>
					</div>
					<div class="row">
						<div class="col-md-4">
							<!-- TASKS -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">My Tasks</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body">
									<ul class="list-unstyled task-list">
										<li>
											<p>Updating Users Settings <span class="label-percent">23%</span></p>
											<div class="progress progress-xs">
												<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width:23%">
													<span class="sr-only">23% Complete</span>
												</div>
											</div>
										</li>
										<li>
											<p>Load &amp; Stress Test <span class="label-percent">80%</span></p>
											<div class="progress progress-xs">
												<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
													<span class="sr-only">80% Complete</span>
												</div>
											</div>
										</li>
										<li>
											<p>Data Duplication Check <span class="label-percent">100%</span></p>
											<div class="progress progress-xs">
												<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
													<span class="sr-only">Success</span>
												</div>
											</div>
										</li>
										<li>
											<p>Server Check <span class="label-percent">45%</span></p>
											<div class="progress progress-xs">
												<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
													<span class="sr-only">45% Complete</span>
												</div>
											</div>
										</li>
										<li>
											<p>Mobile App Development <span class="label-percent">10%</span></p>
											<div class="progress progress-xs">
												<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
													<span class="sr-only">10% Complete</span>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<!-- END TASKS -->
						</div>
						<div class="col-md-4">
							<!-- VISIT CHART -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Website Visits</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body">
									<div id="visits-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="300" class="ct-chart-bar" style="width: 100%; height: 300;"><g class="ct-grids"><line y1="265" y2="265" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="233.75" y2="233.75" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="202.5" y2="202.5" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="171.25" y2="171.25" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="140" y2="140" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="108.75" y2="108.75" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="77.5" y2="77.5" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="46.25" y2="46.25" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="443.984375" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><line x1="78.14174107142857" x2="78.14174107142857" y1="265" y2="65.5" class="ct-bar" ct:value="6384"></line><line x1="134.42522321428572" x2="134.42522321428572" y1="265" y2="66.8125" class="ct-bar" ct:value="6342"></line><line x1="190.70870535714286" x2="190.70870535714286" y1="265" y2="95.09375" class="ct-bar" ct:value="5437"></line><line x1="246.99218750000003" x2="246.99218750000003" y1="265" y2="178.625" class="ct-bar" ct:value="2764"></line><line x1="303.2756696428571" x2="303.2756696428571" y1="265" y2="141.3125" class="ct-bar" ct:value="3958"></line><line x1="359.5591517857143" x2="359.5591517857143" y1="265" y2="106.625" class="ct-bar" ct:value="5068"></line><line x1="415.84263392857144" x2="415.84263392857144" y1="265" y2="25.8125" class="ct-bar" ct:value="7654"></line></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="50" y="270" width="56.283482142857146" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mon</span></foreignobject><foreignobject style="overflow: visible;" x="106.28348214285714" y="270" width="56.283482142857146" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Tue</span></foreignobject><foreignobject style="overflow: visible;" x="162.56696428571428" y="270" width="56.28348214285715" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Wed</span></foreignobject><foreignobject style="overflow: visible;" x="218.85044642857144" y="270" width="56.28348214285714" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Thu</span></foreignobject><foreignobject style="overflow: visible;" x="275.13392857142856" y="270" width="56.28348214285714" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Fri</span></foreignobject><foreignobject style="overflow: visible;" x="331.4174107142857" y="270" width="56.28348214285717" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sat</span></foreignobject><foreignobject style="overflow: visible;" x="387.7008928571429" y="270" width="56.28348214285711" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sun</span></foreignobject><foreignobject style="overflow: visible;" y="233.75" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignobject><foreignobject style="overflow: visible;" y="202.5" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">1000</span></foreignobject><foreignobject style="overflow: visible;" y="171.25" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">2000</span></foreignobject><foreignobject style="overflow: visible;" y="140" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">3000</span></foreignobject><foreignobject style="overflow: visible;" y="108.75" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">4000</span></foreignobject><foreignobject style="overflow: visible;" y="77.5" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">5000</span></foreignobject><foreignobject style="overflow: visible;" y="46.25" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">6000</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="10" height="31.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">7000</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">8000</span></foreignobject></g></svg></div>
								</div>
							</div>
							<!-- END VISIT CHART -->
						</div>
						<div class="col-md-4">
							<!-- REALTIME CHART -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">System Load</h3>
									<div class="right">
										<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
										<button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
									</div>
								</div>
								<div class="panel-body">
									<div id="system-load" class="easy-pie-chart" data-percent="70">
										<span class="percent">36</span>
									<canvas height="130" width="130"></canvas></div>
									<h4>CPU Load</h4>
									<ul class="list-unstyled list-justify">
										<li>High: <span>95%</span></li>
										<li>Average: <span>87%</span></li>
										<li>Low: <span>20%</span></li>
										<li>Threads: <span>996</span></li>
										<li>Processes: <span>259</span></li>
									</ul>
								</div>
							</div>
							<!-- END REALTIME CHART -->
						</div>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
				<p class="copyright">© 2017 <a href="#" target="_blank">Theme I Need</a>. All Rights Reserved.</p>
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.slimscroll.min.js"></script>
	<script src="js/jquery.easypiechart.min.js"></script>
	<script src="js/chartist.min.js"></script>
	<script src="js/klorofil-common.js"></script>
	<script>
	$(function() {
		var data, options;

		// headline charts
		data = {
			labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			series: [
				[23, 29, 24, 40, 25, 24, 35],
				[14, 25, 18, 34, 29, 38, 44],
			]
		};

		options = {
			height: 300,
			showArea: true,
			showLine: false,
			showPoint: false,
			fullWidth: true,
			axisX: {
				showGrid: false
			},
			lineSmooth: false,
		};

		new Chartist.Line('#headline-chart', data, options);


		// visits trend charts
		data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [{
				name: 'series-real',
				data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
			}, {
				name: 'series-projection',
				data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
			}]
		};

		options = {
			fullWidth: true,
			lineSmooth: false,
			height: "270px",
			low: 0,
			high: 'auto',
			series: {
				'series-projection': {
					showArea: true,
					showPoint: false,
					showLine: false
				},
			},
			axisX: {
				showGrid: false,

			},
			axisY: {
				showGrid: false,
				onlyInteger: true,
				offset: 0,
			},
			chartPadding: {
				left: 20,
				right: 20
			}
		};

		new Chartist.Line('#visits-trends-chart', data, options);


		// visits chart
		data = {
			labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			series: [
				[6384, 6342, 5437, 2764, 3958, 5068, 7654]
			]
		};

		options = {
			height: 300,
			axisX: {
				showGrid: false
			},
		};

		new Chartist.Bar('#visits-chart', data, options);


		// real-time pie chart
		var sysLoad = $('#system-load').easyPieChart({
			size: 130,
			barColor: function(percent) {
				return "rgb(" + Math.round(200 * percent / 100) + ", " + Math.round(200 * (1.1 - percent / 100)) + ", 0)";
			},
			trackColor: 'rgba(245, 245, 245, 0.8)',
			scaleColor: false,
			lineWidth: 5,
			lineCap: "square",
			animate: 800
		});

		var updateInterval = 3000; // in milliseconds

		setInterval(function() {
			var randomVal;
			randomVal = getRandomInt(0, 100);

			sysLoad.data('easyPieChart').update(randomVal);
			sysLoad.find('.percent').text(randomVal);
		}, updateInterval);

		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

	});
	</script>



</body></html>